<template>
  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
    <el-form-item label="解码配置编号" prop="decodeId" v-if="dataForm.id">
        <el-input v-model="dataForm.decodeId" placeholder="解码配置编号" disabled></el-input>
    </el-form-item>
    <el-form-item label="解码名称" prop="decodeName">
        <el-input v-model="dataForm.decodeName" placeholder="解码名称"></el-input>
    </el-form-item>
    <el-form-item label="解码描述" prop="decodeDescription">
        <el-input v-model="dataForm.decodeDescription" placeholder="解码描述"></el-input>
    </el-form-item>
    <el-form-item label="解码正则" prop="pathReg">
        <el-input v-model="decodeParamMap.pathReg" placeholder="解码正则"></el-input>
    </el-form-item>
    <el-form-item label="样例文件" prop="sampleFile">
        <el-row>
          <el-col :span="21"><el-input v-model="dataForm.sampleFile" placeholder="样例文件"></el-input></el-col>
          <el-col :span="3"><el-button type="primary" @click="sampleFileDecode()" >样例文件解码</el-button></el-col>
        </el-row>
        <!-- <ul v-for="(value, key) in sampleFileDecodeMap" :key="key">
          {{"解码名称："+key+"， "+"解码结果："+value}}
        </ul> -->
        <template v-for="(value, key) in sampleFileDecodeMap">
            <el-row :key="key">
              <el-col :span="4">解码名称：{{key}}</el-col>
              <el-col :span="8">解码结果：{{value}}</el-col>
            </el-row>
      </template>
    </el-form-item>
    <el-form-item label="节目表" prop="playBillId">
        <el-select style="width:100%" filterable v-model="dataForm.playBillId" placeholder="节目表" @change="playBillChange">
          <el-option v-for=" playBill in playBillList"
          :label="playBill.dataName"
          :key="playBill.id"
          :value="playBill.id"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="表结构设置" prop="tableInfo">
      <el-empty description="暂无表结构配置信息" v-if="decodeParamMap.decodeConfig.length === 0"></el-empty>
      <template v-for="(cols, index) in decodeParamMap.decodeConfig">
        <el-row :key="index" v-if="index%2 == 0">
          <el-col :span="4">{{cols.colName}}</el-col>
          <el-col :span="8"><el-input  v-model="cols.decodeConfig" placeholder=""></el-input></el-col>
          <el-col :span="4" v-if="index + 1 < decodeParamMap.decodeConfig.length">{{decodeParamMap.decodeConfig[index+1].colName}}</el-col>
          <el-col :span="8" v-if="index + 1 < decodeParamMap.decodeConfig.length"><el-input  v-model="decodeParamMap.decodeConfig[index+1].decodeConfig" placeholder=""></el-input></el-col>
        </el-row>
      </template>
    </el-form-item>
    <el-form-item label="创建者" prop="createBy" v-if="dataForm.id">
        <el-input v-model="dataForm.createBy" placeholder="创建者" disabled></el-input>
    </el-form-item>
    <el-form-item label="创建时间" prop="createTime" v-if="dataForm.id">
        <el-input v-model="dataForm.createTime" placeholder="创建时间" disabled></el-input>
    </el-form-item>
    <el-form-item label="更新者" prop="updateBy" v-if="dataForm.id">
        <el-input v-model="dataForm.updateBy" placeholder="更新者" disabled></el-input>
    </el-form-item>
    <el-form-item label="更新时间" prop="updateTime" v-if="dataForm.id">
        <el-input v-model="dataForm.updateTime" placeholder="更新时间" disabled></el-input>
    </el-form-item>
    </el-form>
</template>

<script>
    import {getObj, addDecodeInfo, putDecodeInfo, getAllPlayBillInfo, getTableInfoByPlayBillId, sampleFileDecode} from '@/api/gather/configdecode'

    export default {
    data () {
      return {
        playBillList: [],
        playBill: {},
        dataForm: {
          decodeId: '',
          decodeName: '',
          decodeDescription: '',
          sampleFile: '',
          playBillId: '',
          decodeParams: '',
          createBy: '',
          createTime: '',
          updateBy: '',
          updateTime: ''
        },
        decodeParamMap: {
          pathReg: '',
          decodeConfig: [],
          tableName: ''
        },
        sampleFileDecodeMap: {
        },
        dataRule: {
          decodeName: [
            { required: true, message: '解码名称不能为空', trigger: 'blur' }
          ],
          decodeDescription: [
            { required: true, message: '解码描述不能为空', trigger: 'blur' }
          ],
          playBillId: [
            { required: true, message: '节目表不能为空', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      initByEntity (decodeInfo) {
        this.visible = true;
        this.canSubmit = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.dataForm = decodeInfo
        })
      },
      init (id) {
        this.visible = true;
        this.canSubmit = true;
        this.$nextTick(() => {
            this.$refs['dataForm'].resetFields()
            if (id) {
            getObj(id).then(response => {
                this.dataForm = response.data.data
                this.decodeParamMap = JSON.parse(this.dataForm.decodeParams)
            })
          }
          getAllPlayBillInfo().then(response => {
            this.playBillList = response.data.data
          })
        })
      },
      playBillChange (playBillId) {
        this.playBillList.forEach(playBill => {
          if (playBill.id == playBillId) {
            this.decodeParamMap.tableName = playBill.tableName
          }
        })
        getTableInfoByPlayBillId(playBillId).then(response => {
          this.decodeParamMap.decodeConfig = response.data.data
        })
      },
      sampleFileDecode () {
        sampleFileDecode(this.dataForm.sampleFile,this.decodeParamMap.pathReg).then(response => {
          this.sampleFileDecodeMap = response.data.data
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.canSubmit = false;
            this.dataForm.decodeParams = JSON.stringify(this.decodeParamMap)
            if (this.dataForm.decodeId) {
                putDecodeInfo(this.dataForm).then(data => {
                    this.$notify.success('修改成功')
                    this.disvisible()
                    this.$emit('refreshDecodeData',data.data.data.decodeId)
                }).catch(() => {
                    // this.canSubmit = true;
                });
            } else {
                addDecodeInfo(this.dataForm).then(data => {
                    this.$notify.success('添加成功')
                    this.disvisible()
                    console.log(data.data.data)
                    this.$emit('refreshDecodeData',data.data.data.decodeId)
                }).catch(() => {
                    // this.canSubmit = true;
                });
            }
          }
        })
      },
      disvisible () {
        this.$emit('disDecodeVisible')
      },
      //重置表单
      closeDialog() {
          this.$refs["dataForm"].resetFields()
      }
    }
  }
</script>
